<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>adding tags to an animation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh24";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb24">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 2867px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 2867px;">
 <span class="xr_ar" style="left: -564px; top: 2802px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s1" style="position: absolute; left:36px; top:189px; width:687px; height:222px;">
  <span class="xr_tl xr_s1" style="top: -14px;">One of the most powerful and easy &#8220;tools&#8221; people use to control what can happen any any given time in </span>
  <span class="xr_tl xr_s1" style="top: 3px;">their game is called a &#8220;state machine&#8221;.&nbsp; In a nutshell, a state machine is the part of a game engine that </span>
  <span class="xr_tl xr_s1" style="top: 21px;">follows the games logic and decides what can happen in any given situation depending on the &#8220;state&#8221; of </span>
  <span class="xr_tl xr_s1" style="top: 39px;">the objects involved. In the previous chapter &#8220;Adding Variables to an Animation&#8221; I used the example of a </span>
  <span class="xr_tl xr_s1" style="top: 57px;">player character&#8217;s punching animation.</span>
  <span class="xr_tl xr_s1" style="top: 92px;">Ideally when a game engine checks the collisions of things, such as the player with an enemy, it </span>
  <span class="xr_tl xr_s1" style="top: 110px;">simultaniously checks to see if the enemy is currently in a state where it should be able to take damage etc.</span>
  <span class="xr_tl xr_s1" style="top: 127px;">The tricky part is, depending on the design of any given game, a character/entity might be able to be in </span>
  <span class="xr_tl xr_s1" style="top: 145px;">several states at once.&nbsp; Spriter Pro can help you perfectly designate, organize and &#8220;stack&#8221; any number of </span>
  <span class="xr_tl xr_s1" style="top: 163px;">state possibitities per entity, per animation, per millisecond.</span>
 </div>
 <div class="xr_s4" style="position: absolute; left:380px; top:128px; width:10px; height:10px;">
  <span class="xr_tc xr_s4" style="left: -130px; top: -14px; width: 260px;">Adding Tags to an Animation</span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 </a>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar xr_t23678" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t23678 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 </a>
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="creating%20and%20assigning%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="what%20are%20character%20maps.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 </a>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="adding%20variables%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20variables%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 2751px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20events%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 2751px; width: 34px; height: 34px;"/>
 </a>
 <div class="xr_s1" style="position: absolute; left:36px; top:408px; width:673px; height:57px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">EXAMPLE:</span>&nbsp;In this example we have an enemy character with three animations: idle, getting hit, and </span>
  <span class="xr_tl xr_s1" style="top: 3px;">blocking (guarding).&nbsp; The first animation we&#8217;ll add a tag to is &#8220;idle&#8221;. </span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:714px; width:673px; height:89px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">1) </span>Choose the Idle animation, expand the time line palette upward to reveal the individual object </span>
  <span class="xr_tl xr_s1" style="top: 3px;">timelines, and then scroll to the very bottom so we can edit the metadata timeline for the entire </span>
  <span class="xr_tl xr_s1" style="top: 21px;">animation.&nbsp; Doubleclick on the metadate timeline right at the very beginning (zero miliseconds).</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:1151px; width:673px; height:80px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">2) </span>This will bring up the &#8220;Edit MetaData&#8221; dialogue box. This time, instead of creating a variable, type in </span>
  <span class="xr_tl xr_s1" style="top: 3px;">a name in the &#8220;Add Tag&#8221; box and press enter. In this example I&#8217;m creating a Tag called &#8220;Vulnerable&#8221;.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 21px;">Once you press enter, you should see the tag you just created in the &#8220;Availible Tags&#8221; collumn.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:44px; top:1578px; width:673px; height:117px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">3) </span>Now check the &#8221;key Tags&#8221; checkbox toward the middle right pf the dialogue and then drag the name </span>
  <span class="xr_tl xr_s1" style="top: 3px;">o the Tag you just created from the &#8220;Availible Tags&#8221; Collumn to the &#8220;Active Tags&#8221; collumn.&nbsp; Not only </span>
  <span class="xr_tl xr_s1" style="top: 21px;">have you created the Tag, but you&#8217;ve also told Spriter that starting at the beginning of the animation, this </span>
  <span class="xr_tl xr_s1" style="top: 39px;">Tag is active...in other words, from the start of this animation, one of the states of this entity is </span>
  <span class="xr_tl xr_s1" style="top: 57px;">&#8220;vulnerable&#8221;!...meaning, it can get hit and take damage from the player.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:1985px; width:673px; height:452px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">4) </span>Now lets go to the &#8220;getting hit&#8221; animation.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 3px;">The tricky part of a characters getting hit animation in a game is (depending on the game) the enemy </span>
  <span class="xr_tl xr_s1" style="top: 21px;">getting hit should no longer be vulnerable to new damage until after the getting hit animation is finished </span>
  <span class="xr_tl xr_s1" style="top: 39px;">playing, or, should not be vulnerable to additional damage until at least a certian amount of the getting </span>
  <span class="xr_tl xr_s1" style="top: 57px;">hit animation has played. This allows for instances like the ability to repeatedly hit enemies with a </span>
  <span class="xr_tl xr_s1" style="top: 74px;">sequence of attacks in a fighting game etc.</span>
  <span class="xr_tl xr_s1" style="top: 110px;">For this example, we&#8217;re going to make the enemy impervious to other damage for the first half second of </span>
  <span class="xr_tl xr_s1" style="top: 127px;">his getting hit animation, and then once again vunlerable to attacks after that initial half second.</span>
  <span class="xr_tl xr_s1" style="top: 163px;">Go to the mid-way point of the Meta Data timeline for the entire animation (the very bottom of the </span>
  <span class="xr_tl xr_s1" style="top: 181px;">timeline palette) and double click to bring up the &#8220;Edit MetaData&#8221; dialogue. You should see the </span>
  <span class="xr_tl xr_s1" style="top: 198px;">&#8220;Vulnerable&#8221; Tag already in the &#8220;Availible Tags&#8221; collumn. No need to recreate it..Tags are automatically </span>
  <span class="xr_tl xr_s1" style="top: 216px;">universal throughout the Enitiy you create them for.</span>
  <span class="xr_tl xr_s1" style="top: 252px;">Drag the &#8220;Vulnerable&#8221; Tag from the &#8220;Availible Tags&#8221; collumn to the &#8220;Active Tags&#8221; collumn, making </span>
  <span class="xr_tl xr_s1" style="top: 269px;">sure the &#8220;key tags&#8221; checkbox is checked (on).</span>
  <span class="xr_tl xr_s1" style="top: 305px;">Finally, use the &#8220;currnet time&#8221; box at the very low-left of the &#8220;Edit MetaData&#8221; dialogue in order to </span>
  <span class="xr_tl xr_s1" style="top: 322px;">navigate back to the very beginning of the timeline (zero) and then make sure the &#8220;Vunlerable&#8221; Tag is in </span>
  <span class="xr_tl xr_s1" style="top: 340px;">the &#8220;Availible Tags&#8221; and not the &#8220;Active Tags&#8221; column. Now the enemy&#8217;s &#8220;Vulnerable&#8221; Tag (or state in </span>
  <span class="xr_tl xr_s1" style="top: 358px;">this case) should be invulnerable for the first half of the getting hit animation and vulnerable fo the </span>
  <span class="xr_tl xr_s1" style="top: 376px;">second half of the animation.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2618px; width:673px; height:127px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">5) </span>For the Blocking animation we would follow the same steps as above... in this case, for the first </span>
  <span class="xr_tl xr_s1" style="top: 3px;">fraction of a second, the enemy character does not yet have his guard up and should therefore have the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">&#8220;Vulnerable&#8220; Tag active, and then from that point on in the animation should not be vulnerable...in other </span>
  <span class="xr_tl xr_s1" style="top: 39px;">words, make sure from that point on in the metadata timeline that the &#8220;Vulnerable&#8221; Tag is in the </span>
  <span class="xr_tl xr_s1" style="top: 57px;">&#8220;Availible Tags&#8221; collumn and not in the &#8220;Active Tags&#8221; collumn.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/274.jpg" alt="" title="" style="left: 198px; top: 450px; width: 349px; height: 235px;"/>
 <img class="xr_ap" src="index_htm_files/275.jpg" alt="" title="" style="left: 122px; top: 771px; width: 501px; height: 345px;"/>
 <img class="xr_ap" src="index_htm_files/276.jpg" alt="" title="" style="left: 130px; top: 1203px; width: 500px; height: 345px;"/>
 <img class="xr_ap" src="index_htm_files/277.jpg" alt="" title="" style="left: 130px; top: 1670px; width: 500px; height: 267px;"/>
 <img class="xr_ap" src="index_htm_files/278.jpg" alt="" title="" style="left: 13px; top: 2391px; width: 360px; height: 193px;"/>
 <img class="xr_ap" src="index_htm_files/279.jpg" alt="" title="" style="left: 385px; top: 2391px; width: 359px; height: 193px;"/>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="adding%20events%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>